<template>
	<view class="channel">

		<view class="sousuo">
			<view class="sousuokuan">
				<uni-icons type="search" size="20"></uni-icons>
				<input type="text" @confirm="sousuo" @input="input" v-model="titlesou" placeholder="搜索频道" />
			</view>
			<button type="default" @tap="xinzeng()">新增</button>
		</view>
		<view class="channel-post" v-if="show">
			<input type="text" placeholder="请输入标题" style="border:1px #3F536E solid ;padding: 10px 0px;"
				v-model="titles" />
			<button type="default" @tap="yespost()" style="background-color: #00aaff; color: white; border-radius: 50rpx;">确定</button>
		</view>
		<view class="leibiao">频道列表</view>
		
		<scroll-view scroll-y="true">
				<view v-if="showfour" class="channel-list" >
					<text>{{titlesousuo.title}}</text>
					<button type="default" @tap="bianji(titlesousuo.title)">编辑</button>
					<button type="default" @tap="deletes(titlesousuo.id)">删除</button>
				</view>
				<view v-if="showthree" class="channel-list" v-for="(item,index) in xinwenpdid" :key="index">
					<text>{{item.title}}</text>
					<button type="default" @tap="bianji(item)">编辑</button>
					<button type="default" @tap="dialogToggle(item.id)">删除</button>
				</view>
				<view>
					<uni-popup ref="inputDialog" type="dialog">
					<uni-popup-dialog ref="inputClose"  mode="input" title="修改标题" value="" v-model="titleput"
					placeholder="请输入标题" @confirm="putanniu"></uni-popup-dialog>
					</uni-popup>
				</view>
			    <view>
			    	<uni-popup ref="alertDialog" type="dialog">
			    		<uni-popup-dialog cancelText="关闭" confirmText="删除" title="提示" content="是否删除？" @confirm="deletes"></uni-popup-dialog>
			    	</uni-popup>
			    </view>
				</scroll-view>
	</view>
</template>

<script>
	 import { xinwenpd , postpd , deletepd , xinwenpdid ,putpd ,titlesousuo } from"../../common/api.js"
	export default {
		data() {
			return {
				title:"新闻频道管理",
								titles:"",
								xinwenpdid:{},
								show:false,
								showtwo:false,
								showthree:true,
								showfour:false,
								titleput:'',
								num:'',
								titlesou:'',
								titlesousuo:'',
								deleteitem:''
			}
		},
		onLoad() {
			xinwenpdid().then((res)=>{
							this.xinwenpdid =res[1].data
                      console.log(res)
				// console.log(this.xinwenpd)
			})
			uni.request({
				url:`http://10.83.232.158:7062/api/Chanel`,
				method:'GET'
			}).then((res)=>{
				this.xinwenpdid = res[1].data.result
				console.log(this.xinwenpdid)
			})
			// xinwenpd().then((res)=>{
			// 	this.xinwenpdid=res[1].data.result
			// })
		},
		methods: {
			xinzeng() {

				if (this.show == true) {
					this.show = false;
				} else {
					this.show = true;
				}
			},
			yespost() {
				// uni.request({
				// 		url:`http://172.30.12.198:7062/api/Chanel`,
				// 		method:'POST'
				// 	}).then((res)=>{
				// 		this.titel = res[1].data.result
				// 		console.log(this.title)
				// 	}),
				
				postpd(this.titles);
				console.log(this.titles)
				
				this.show = false;
				location.reload();
			},
			dialogToggle(item) {
				this.deleteitem = item
				this.$refs.alertDialog.open()
			},
			
		
			deletes(){
				deletepd(this.deleteitem);
				setTimeout(()=>{
					this.$router.go(0)
				},)
			},
			bianji(item){
				this.num =item.id;
				this.titleput = item.title;
				this.showtwo = true;
				this.$refs.inputDialog.open()
			},
			putanniu(val){
				uni.showLoading({
					title: '正在修改'
				})
				setTimeout(() => {
					uni.hideLoading()
					console.log("修改完成")
					// 关闭窗口后，恢复默认内容
					this.$refs.inputDialog.close()
				}, 500)
				putpd(this.num,val)
				setTimeout(()=>{
					this.$router.go(0)
				},1000)
			},
			sousuo(){
				titlesousuo(this.titlesou).then((res)=>{
					this.titlesousuo = res[1].data
				})
				this.showthree = false
				this.showfour = true
			},
			input() {
				// 判断输入内容为空的时候回到起始位置
				if (!this.titlesou) {
					uni.navigateTo({
						url: '/pages/channel/channel'
					});
					this.showthree = true
					this.showfour = false
				}
			}
			
			
		}
	}
</script>

<style>
	.channel-post{
			width: 250px;
			height: 60px;
		    margin: auto;
		    margin-bottom: 15px;
		    text-align: center;
		    display: flex;
		    align-items: center;
		}
		.sousuo{
			display: flex;
			align-items: center;
		}
		.leibiao{
			width: 360px;
			font-size: 45rpx;
			color: #00ff7f;
			position: relative;
			left: 16rpx;
			background-color: #6776ff;
			border: 1px #cacaca solid;
		}
		 .sousuokuan{
			 display: flex;
			 align-items: center;
			 border-radius: 50rpx;
			 background:#ececec;
			 height:73rpx; 
			 width: 500rpx;
			 margin:40rpx; 
		 }
		 .sousuokuan text:nth-child(1){
			 margin: 0px 15px;
		 }
		 .sousuo button{
			width: 80px;
			height:85rpx; 
			background-color: #00aaff;
			color: white;
			margin-right: 20px;
			 border-radius: 40rpx;
		 }
		 .channel-list{
			 margin-left: 7px;
			 display: flex;
			 align-items: center;
			 height: 100px;
			 width: 360px;
			 border: 1px #cacaca solid;
			 /* position: absolute; */
		 }
		 .channel-list text{
			 margin-left: 50px;
			 font-weight: bolder;
		 }
		 .channel-list button:nth-child(2){
			 background-color: #55aaff;
			 color: white;
			 /* margin-left: 130px; */
			 position: relative;
			 left: 150rpx;
			 border-radius: 50rpx;
		 }
		 .channel-list button:nth-child(3){
			 background-color: #ff0000;
			 color:white;
			 position: relative;
			 left: 50rpx;
			 border-radius: 50rpx;
		 }
</style>
